import React, { Component } from 'react';
import {Range} from 'iftide'

import {
    StyleSheet,
    View,
    Text,
    TextInput
    } from 'react-native';

export default class Range_Demo extends Component{
    constructor(props) {
        super(props);
        this.state={
            defaultValue:5000,//初始化时，出入框和滑块的默认值
            maxValue : 10000,//滑块的最大值
            minValue : 0//滑块的最小值
        }
    }

    _onSlidingComplete=(value)=>{
        console.log("结束滑动的时候调用此回调:"+value)
    }

    _onValueChange=(value)=>{
        console.log("拖动滑块的过程中不断调用此回调:"+value)
    }

    _changeStep=()=>{
        this.refs.range.changedStep(52)
    }

    _onBlurEvent=(val)=>{
        console.log("输入框失去焦点时触发的事件:"+val);
        let {defaultValue,maxValue,minValue}=this.state;
        if(val<minValue || val>maxValue || val==""){
            console.log("数值不正确");
            this.refs.range.resetVal(defaultValue)
        };
    }

    _setInputFocus=()=>{
        this.refs.range.setInputFocus()
    }

    render(){
        let {defaultValue,maxValue,minValue}=this.state;
        var range = {
            width : '90%',//构件可展示的宽度
            disabled : false,//是否禁用
            defaultValue :defaultValue,//初始化时，出入框和滑块的默认值
            maxValue : maxValue,//滑块的最大值
            minValue : minValue,//滑块的最小值
            maxText:'最高',//滑块的滑块的文本
            minText:'',//滑块的滑块的文本
            step : 100,//滑块的移动的步长
            currencySymbol:'¥',//货币符号
            currencyUnit:'RMB',//货币单位
            maxLength:12,//输入框可输入的最大长度
            maximumTrackTintColor:"#ffbdbe",//滑块右侧轨道的颜色
            minimumTrackTintColor:"#ff7b7b",//滑块左侧轨道的颜色
            slidingCompleteEvent:this._onSlidingComplete,//结束滑动的时候调用此回调
            valueChangeEvent:this._onValueChange,//拖动滑块的过程中不断调用此回调
            blurEvent:this._onBlurEvent //输入框失去焦点时触发的事件
        }
        let that=this;

        return (
            <View style={{flex:1,alignItems:'center'}}>
                <Range {...range} ref="range"></Range>
                <Text onPress={()=>{this._changeStep()}}>更改step</Text>
                <Text onPress={()=>{this._setInputFocus()}}>让输入框获取焦点</Text>
                <TextInput
                    style={{width:280,height:30,borderWidth:1,borderColor:'red'}}
                    value="测试让输入框失去焦点用的"
                />
            </View>
        );
    }

}